<template>
  <view class="order">
    <u-sticky bgColor="#fff">
      <u-tabs active-color="#f15929" :list="allList" :is-scroll="false" :current="tabsIndex" @change="tabClick"></u-tabs>
    </u-sticky>
    <u-empty mode="order" v-if="!orderList.length"></u-empty>

    <div class="order-list" v-if="orderList.length">
      <div class="order-item" v-for="item in orderList" :key="item.id">
        <div class="order-header">
          <span>订单编号：{{ item.order_no }}</span>
          <span>{{ item.statusName}}</span>
        </div>
        <u-line></u-line>
        <div class="image-list">
          <div class="car-item" v-for="good in item.orderDetails" :key="good.id">
            <u-image :src="good.goods_image" :width="160" :height="160"></u-image>
            <div class="goods-detail">
              <div class="goods-price-box">
                <div class="goods-name">{{ good.goods_name }}</div>
                <div class="goods-price">￥{{ good.amount / good.count }}</div>
              </div>
              <div class="goods-price-box">
                <div class="goods-desc">
                  {{ good.spec_key }}
                </div>
                <div class="goods-count">
                  <span class="goods-count-value">x {{ good.count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="total">
          <span>实际付款：</span>
          <span class="total-value">￥{{ item.amount }}</span>
        </div>
        <u-line></u-line>
        <div class="button-list">
          <div>
            <u-button v-if="item.buttonShow.pay"  style="margin-left: 10px" size="mini" @click.stop="toPay(item)"  type="error" :ripple="true" shape="circle">去支付</u-button>
            <u-button v-if="item.buttonShow.tuikuan"  style="margin-left: 10px" size="mini" @click.stop="backOrder(item)"  type="error" :ripple="true" shape="circle">退款申请</u-button>
            <u-button v-if="item.buttonShow.confirm" style="margin-left: 10px" size="mini" @click.stop="confirmOrder(item)"  type="primary" :ripple="true" shape="circle">确认收货</u-button>
            <u-button v-if="item.buttonShow.delete"  style="margin-left: 10px" size="mini" @click.stop="deleteOrder(item)"  type="error" :ripple="true" shape="circle" plain>删除</u-button>
          </div>
        </div>
      </div>
      <u-modal v-model="backShow" show-cancel-button @confirm="backConfirm">
        <div style="padding: 40px 30px">
          <u-input placeholder="请输入退款理由" v-model="backReason" type="text" :border="true"  />
        </div>
      </u-modal>
      <u-modal v-model="deleteShow" show-cancel-button @confirm="deleteConfirm" >
        <div style="line-height: 80px;text-align: center">确认删除？</div>
      </u-modal>
      <u-modal v-model="commentShow" show-cancel-button @confirm="commentConfirm">
        <div style="padding: 20px 30px">
          <u-input :rows="10" placeholder="请输入评价内容" v-model="comment" type="textarea" :border="true"  />
        </div>
      </u-modal>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabsIndex: 0,
      allList: [
        {tabId: 0,name: '全部', status: 'all'},
        {tabId: 1,name: '待接单', status: 'wait_food'},
        {tabId: 2,name: '配送中', status: 'wait_received'},
        {tabId: 3,name: '退款中', status: 'wait_refund'},
        {tabId: 4,name: '已完成', status: 'finish'},
      ],
      orderList: [],
      baseUrl: this.$baseUrl,
      backShow: false,
      currentOrder: {},
      backReason: '',
      deleteShow: false,
      commentShow: false,
      comment: '',
      status: 'all'
    }
  },
  onLoad({ index }) {
    this.tabsIndex = index || 0
    this.status = this.allList[this.tabsIndex].status
    this.getOrderList()
  },
  methods: {
    getOrderList() {
      this.$api.orderList({
        status: this.status,
        member_id: uni.getStorageSync('userInfo').id
      }).then(res => {
        this.orderList = res.map(el => {
          let buttonShow = {
            pay: false,
            express:false,
            tuikuan: false,
            shouhuo: false,
            confirm: false,
            delete: false,
            // 评价
            comment: false
          }
          return {
            ...el,
            statusName: this.getStatus(el,buttonShow),
            buttonShow
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    tabClick(index){
      this.tabsIndex = index
      this.status = this.allList[index].status
      this.getOrderList()
    },
    getStatus(item, buttonShow) {
      if (item.order_status === 0) {
        if (item.status === 1) {
          buttonShow.pay = true
          return '待支付'
        } else if (item.status === 2) {
          buttonShow.tuikuan = true
          return '备货中'
        } else if (item.status === 3) {
          return '配送中'
        }else if (item.status === 4) {
          buttonShow.tuikuan = true
          buttonShow.delete = false
          return '已完成'
        }
      } else if (item.order_status === 1) {
        return '退款审核中'
      } else if (item.order_status === 2) {
        buttonShow.delete = true
        return '退款成功'
      } else if (item.order_status === 3) {
        buttonShow.delete = true
        return '退款失败'
      } else if (item.order_status === 4) {
        if (item.status === 4) {
          buttonShow.tuikuan = true
          buttonShow.delete = false
          return '已完成'
        }
      }
    },
    orderDetail(item) {
      this.$u.route({
        url: '/pages/order/detail',
        params: {
          id: item.id
        }
      })
    },
    backOrder(item) {
      this.currentOrder= item
      this.backShow = true
    },
    toPay() {

    },
    backConfirm() {
      if (!this.backReason) {
        uni.showToast({
          title: '请输入退款理由',
          icon: 'none'
        })
        this.backShow = true
        return
      }
      this.$api.updateOrder({
        id: this.currentOrder.id,
        order_status: 1,
        back_reason: this.backReason,
        status: 8
      }).then(res => {
        uni.showToast({
          title: '退款申请',
          icon: 'success'
        })
        this.getOrderList()
      }).catch(err => {
        console.log(err)
      })
    },
    confirmOrder(item) {
      this.$api.updateOrder({
        id: item.id,
        status: 5
      }).then(res => {
        uni.showToast({
          title: '收货成功',
          icon: 'success'
        })
        this.getOrderList()
      }).catch(err => {
        console.log(err)
      })
    },
    deleteOrder(item) {
      this.currentOrder = item
      this.deleteShow = true
    },
    deleteConfirm() {
      this.$api.deleteOrder({
        id: this.currentOrder.id
      }).then(res => {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        this.getOrderList()
      }).catch(err => {
        console.log(err)
      })
    },
    confirmComment(item) {
      this.currentOrder = item
      this.commentShow = true
    },
    toComment(item) {
      this.$u.route({
        url: `/pages/comment/detail?id=${item.consult_id}&orderId=${item.id}`
      })
    },
    commentConfirm() {
      if (!this.comment) {
        uni.showToast({
          title: '请输入评价内容',
          icon: 'none'
        })
        this.commentShow = true
        return
      }
      this.$api.createComment({
        order_id: this.currentOrder.id,
        member_id: uni.getStorageSync('userInfo').id,
        content: this.comment
      }).then(res => {
        uni.showToast({
          title: '评价成功',
          icon: 'success'
        })
        this.getOrderList()
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.order {
  background-color: #f7f8fa;
  height: 100%;
  overflow: auto;
}

.order-list {
  padding: 20rpx;
}
.order-item {
  border-radius: 10rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
  }
  .button-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
  }
  .total {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 40rpx;
  }
  .coupon {
    color: #dd6161;
  }
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .car-item {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      color: #323233;
      font-size: 24rpx;
      background-color: #FFFFFF;
      display: flex;
      border-bottom: 1px solid #f7f8fa;
      .goods-detail {
        margin-left: 10px;
        flex-grow: 1;
        .goods-name {
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 10px;
        }
        .goods-price-box {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: #f15929;
            font-size: 28rpx;
          }
          .goods-count {
            display: flex;
            .goods-count-value{
              margin: 0 10px;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>
